<template>
	<view>

		<view class="pageContainer">
			<view class="billDetail_box">
				<view class="workerAvatar">
					<u-image :src="billDetail.userInfo.header_img" shape="square" border-radius="30" width="80rpx"
						height="80rpx" :lazy-load="false" :show-loading="false" 
							:fade="false"></u-image>
				</view>
				<view class="workerName">{{billDetail.userInfo.name}}</view>
				<view class="workerMoney">
					¥<text class="digitFont">{{billDetail.cost}}</text>
				</view>
				<view class="workerType">{{billDetail.account_type_str}}</view>

				<u-line color="red" margin="40rpx 0" />
				<!-- <u-divider :use-slot="false" half-width="100%" margin-top="40" margin-bottom="40"></u-divider> -->

				<view class="billList_con">
					<view class="billItem">
						<view class="billLabel">项目</view>
						<view class="billValue">{{projectInfo.name}}</view>
					</view>
					<view class="billItem" v-if="billDetail.account_type=='4'">
						<view class="billLabel">给款人</view>
						<view class="billValue">{{billDetail.pay_name}}</view>
					</view>
					<view class="billItem" v-if="billDetail.account_type=='2' || billDetail.account_type=='3'">
						<view class="billLabel">材料名称</view>
						<view class="billValue">{{billDetail.pay_name}}</view>
					</view>
					<view class="billItem">
						<view class="billLabel">金额</view>
						<view class="billValue">{{billDetail.cost}}元</view>
					</view>
					<view class="billItem" v-if="billDetail.num>0">
						<view class="billLabel">数量</view>
						<view class="billValue">{{billDetail.num}}</view>
					</view>
					<view class="billItem">
						<view class="billLabel">付款日期</view>
						<view class="billValue">{{billDetail.add_date}}</view>
					</view>
					<view class="billItem">
						<view class="billLabel">记录日期</view>
						<view class="billValue">{{billDetail.add_time_str}}</view>
					</view>
					<view class="billItem">
						<view class="billLabel">付款方式</view>
						<view class="billValue">{{billDetail.pay_type_str}}</view>
					</view>
					<view class="billItem" v-if="billDetail.address">
						<view class="billLabel">地址</view>
						<view class="billValue">{{billDetail.address}}</view>
					</view>
					<view class="billItem" v-if="billDetail.remark">
						<view class="billLabel">备注</view>
						<view class="billValue">{{billDetail.remark}}</view>
					</view>
					<view class="uploadList" v-if="imgList.length>0">
						<view class="uploadItem" v-for="(item, index) in imgList" :key="index">
							<image :src="item.url" mode="aspectFill" @click="previewImg(item.url)"></image>
						</view>
					</view>
				</view>

				<view class="billPost_con">
					<view class="billDel" @click="delClick">删除</view>
					<view class="billEdit" @click="editClick">修改</view>
				</view>
			</view>

			<view class="billMore_box" @click="billAll">
				<text>查看全部记录</text>
				<u-icon name="arrow-right" color="#BFBFBF"></u-icon>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 记账详情
				id: '',
				billDetail: {
					num:'',
					remark:'',
					pay_name:'',
					pay_type_str:'',
					cost:'',
					address:'',
					name:'',
					userInfo:{},
					account_type:'',
				},
				imgList: [],
				projectInfo: {},
				userInfo: {},
			}
		},
		onLoad(option) {
			console.log(option)
			var _this = this;
			_this.id = option.id;
		},
		onShow() {
			var _this = this;
			_this.getBillDetail();
		},
		onReady() {

		},
		methods: {
			// 获取记账详情
			getBillDetail() {
				var _this = this;
				_this.$u.get('/api/project.account/getDetail', {
					id: _this.id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取记账详情==");
					console.log(res);
					_this.billDetail = res.data;
					// 图片
					_this.imgList = res.data.imgList;
					_this.projectInfo = res.data.projectInfo;
					_this.userInfo = res.data.userInfo;
				}).catch(res => {
					console.log(res);
				})
			},

			// 删除记账
			delClick() {
				var _this = this;
				uni.showModal({
					title: '提示',
					content: '是否确定删除此记账？',
					success: function(res) {
						if (res.confirm) {
							// console.log('用户点击确定');
							_this.$u.post('/api/project.account/delete_do', {
								id: _this.id,
							}).then(res => {
								console.log("==删除记账==");
								console.log(res);
								uni.showToast({
									title: res.msg,
									duration: 2000
								});
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
								}, 2000)
							}).catch(res => {
								console.log(res);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			// 预览图片
			previewImg(src) {
				let _this = this;
				// console.log(_this.imgList);
				var current = src;
				var imgList = _this.imgList;
				var imagesUrl = [];
				for (var i = 0; i < imgList.length; i++) {
					imagesUrl[i] = imgList[i].url;
				}
				// console.log(imagesUrl)
				
				uni.previewImage({
					current: current,
					urls: imagesUrl
				})
			},

			// 记账编辑
			editClick() {
				var _this = this;
				// account_type：1人工、2杂费、3材料、4入款
				var account_type = _this.billDetail.account_type;
				if (account_type == '1') {
					uni.navigateTo({
						url: '../manualEdit/manualEdit?id=' + _this.id
					})
				} else if (account_type == '2') {
					uni.navigateTo({
						url: '../sundryEdit/sundryEdit?id=' + _this.id
					})
				} else if (account_type == '3') {
					uni.navigateTo({
						url: '../materialEdit/materialEdit?id=' + _this.id
					})
				} else if (account_type == '4') {
					uni.navigateTo({
						url: '../incomeEdit/incomeEdit?id=' + _this.id
					})
				}
			},

			// 查下全部记录
			billAll(url) {
				uni.navigateTo({
					url: '../billStatistics/billStatistics?member_id=' + this.projectInfo.member_id + '&project_id=' + this
						.billDetail.project_id+'&keyword='+this.billDetail.pay_name
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	.billDetail_box {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
		margin-top: 60rpx;
		position: relative;
	}

	.workerAvatar {
		border: 8rpx solid #E8F4FF;
		border-radius: 30rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -45rpx;
	}

	.workerName {
		font-size: 28rpx;
		color: #333;
		text-align: center;
		margin-top: 20rpx;
	}

	.workerMoney {
		font-size: 30rpx;
		color: $uni-color-warning;
		text-align: center;
		padding: 30rpx 0;
		overflow: hidden;
	}

	.workerMoney text {
		font-size: 50rpx;
		font-weight: bold;
		margin-left: 5rpx;
	}

	.workerType {
		font-size: 28rpx;
		color: #333;
		text-align: center;
	}

	.billList_con {
		overflow: hidden;
	}

	.billItem {
		padding-bottom: 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.billLabel {
		color: #666;
	}

	.billValue {
		color: #333;
	}

	.billPost_con {
		padding-top: 30rpx;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.billDel {
		width: 280rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
		background: #ffffff;
		border: 2rpx solid #999999;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.billEdit {
		width: 280rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-size: 28rpx;
		color: $uni-color-primary;
		background: #ffffff;
		border: 2rpx solid $uni-color-primary;
		border-radius: 10rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.billMore_box {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 0 8rpx 16rpx 0rpx rgba(24, 24, 24, 0.13);
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>
